<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
    <style>
        .qq{
            width: 150px;
            height: 150px;
            background-color: #b92c28;
        }
        .ww{
            border: 6px solid #5e5e5e;
        }
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="div1" @click="div1click" style="background-color: #059ca0">
    <div id="div2" @click="div2click" style="width: 100px;height: 100px;background-color:#d8505c">
        <div id="div3" @click.stop="div3click($event)" style="width: 50px;height: 50px;background-color: #7a4cff">请点击我</div>
    </div>
    <a href="http://www.baidu.com" @click.prevent.stop="opena($event)">打开百度</a>
    <input type="text" v-model="imgWidth" placeholder="用户名" @keydown="printkey($event)">
    <input type="text" v-model="imgHeight" v-if="ok" @keydown.a="printkey($event)" placeholder="密码">
    <input type="button" value="登录" @click="btnclick">
    <img v-bind:src="imgurl" :width="imgWidth" :height="imgHeight">
    <div v-bind:class="styleqq">我是div</div>
    <div v-bind:class={"qq":see,"ww":ok}>我是div</div>
    {{styleqq}}

    <div v-bind:class="styleee">我是div</div>
   <p>您好：<span v-cloak>{{username}}</span></p>

<!-- v-once数据只呈现一次   -->
   <p v-once>{{imgWidth}}</p>
<!-- v-pre标签里的内容原样输出，不会编译   -->
   <p v-pre>{{imgWidth}}</p>
<!--    过滤器-->
    <p>{{imgWidth | test}}</p>
    <p>{{imgWidth | number(2)}}</p>
    <p>{{"nowDate" | dateFomat}}</p>


</div>

</body>
<script>
    Vue.config.keyCodes={
         "aa":65,
         "bb":66
    }
    Vue.filter("test",function (data) {
        if(data>9||data<=0){
            return data
        }
         return "0"+data
    })
    Vue.filter("number",(data,n)=>{
        let  num=new Number(data)
        return num.toFixed(n)
    })
    new Vue({
        el:"#div1",
        data:{
            ok:true,
            see:false,
            imgurl:"https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1193202301,107139440&fm=26&gp=0.jpg",
            imgWidth:"100",
            imgHeight:"100",
            styleqq:"qq",
            styleww:" border: 6px solid #5e5e5e;",
            styleee:{border:"10px solid #059ca0",fontsize:30},
            username:"小米",
            nowDate:Date.now()


        },
        methods:{
            div1click:function(){
                console.log("div1被点击了！")
            },
            div2click:function(){
                console.log("div2被点击了！")
            },
            div3click:function(e){
                console.log("div3被点击了！")
            },
            opena:function (e) {
              //e.preventDefault();
              console.log("是不是打不开百度")

            },
            btnclick:function(){

            },
            printkey:function (e) {

                  console.log(e.keyCode)

              }

            },
            filters:{
              dateFomat:(date)=>{
                 let dates=new Date(date)
                 return dates.getFullYear()+"年"+(dates.getMonth())+"月"+dates.getDate()+"日"
                 // let datas =new Date();
                // toLocaleDateString():根据本地时间把 Date 对象的日期部分转换为字符串
                // return  datas.toLocaleDateString();

             }
            },
        created:function () {
             alert("vue！！！！！")
        }


    });

    function d3click(e) {
        e.stopPropagation();
        console.log(e)
        console.log(e.type)
        console.log(e.target)
    }
</script>
</html>